<template>
  <!--  titleSlide ? 'headerUpAnimation' : 'headerDownAnimation' -->
  <div
      class="header"
      ref="headerRef"
      :class="{'headPadding':padding == true,
    'headerUpAnimation':titleSlide == 1,
    'headerDownAnimation':titleSlide == -1,
    '':titleSlide == 0}"
  >
    <!-- 顶部区域 -->
    <div class="header-icon" ref="headerIconRef">
      <div>
        <!-- 返回按钮上一页 -->
        <van-icon
            v-show="showPre"
            name="arrow-left"
            size="24"
            @click="prePage"
        />
      </div>
      <!-- 中间插槽区域 -->
      <div>
        <slot name="centerOption"></slot>
      </div>
      <div>
        <slot name="more">
          <van-space>
            <!-- 搜索按钮 -->
            <van-icon v-if="showSearchIcon" name="search" size="24"/>
            <!-- 加号 -->
            <van-popover
                v-if="showAdd"
                v-model:show="showPopover"
                @select="onSelect"
                :actions="actions"
                overlay
                placement="bottom-end"
            >
              <template #reference>
                <i class="iconfont icon-tianjiatianchong prime"></i>
              </template>
            </van-popover>
          </van-space>
        </slot>
      </div>
    </div>

    <!-- 标题区域 -->
    <p
        class="title"
        :class="titleSlide == 0 ? '' : titleSlide == 1 ? 'titleSlideUpAnimation' : 'titleSlideDownAnimation'"
        ref="titleRef"
    >
      {{ title }}
    </p>
    <!--  插槽区域 -->
    <div
        class="mySlot"
        :class="titleSlide == 0 ? '' : titleSlide == 1 ? 'slotSlideUpAnimation' : 'slotSlideDownAnimation'"
        ref="mySlotRef"
    >
      <slot name="operate"></slot>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, onMounted, watch} from "vue";
import {useRouter} from "vue-router";
import {showToast} from "vant";
import useOperatorBoxStore from "@/stores/modules/operatorBox.js";

const router = useRouter();
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  showSearchIcon: {
    type: Boolean,
    default: false,
  },
  showPre: {
    type: Boolean,
    default: true,
  },
  showAdd: {
    type: Boolean,
    default: true,
  },
  // -1 下拉 0什么都不做
  titleSlide: {
    type: Number,
    default: 0,
  },
  // 开启paddin?
  padding: {
    type: Boolean,
    default: true
  }
});

/** 返回上一页按钮 */
const prePage = () => {
  // console.log(router);
  router.back();
};

/** 标题 */
const headerRef = ref();
const headerIconRef = ref();
const titleRef = ref();
const mySlotRef = ref();

/** 加号里面展示的内容 */
const showPopover = ref(false);

/** 选项 */
const actions = [
  {text: "写速记", icon: "add-o"},
  {text: "添加网址", icon: "link-o"},
  {text: "添加图片", icon: "photo-o"},
  {text: "添加文件", icon: "description"},
];
/** 点击选项触发 */
const onSelect = (action) => {
  // showToast(action.text)
  if ("写速记" === action.text){
    handleCreateArticle()
  }else if("添加网址" === action.text){
    useOperatorBoxStore().showOverlay(true, 'addUrl');
  }else if("添加图片" === action.text){
    handleCreatePic()
  }else if("添加文件" === action.text){
    handleCreateFile()
  }
};

/** 写速记 */
const handleCreateArticle = () => {
  // 2. 打开遮罩层
  useOperatorBoxStore().showOverlay(true, 'edit');
}

/** 添加图片 */
const handleCreatePic = () => {
  // 2. 打开遮罩层
  useOperatorBoxStore().showOverlay(true, 'edit');
}

/** 添加文件 */
const handleCreateFile = () => {
  // 2. 打开遮罩层
  useOperatorBoxStore().showOverlay(true, 'edit');
}

/** 由于标题设置为绝对定位，脱离了文档流，会导致高度坍塌，这里获取所有子元素的高度，然后赋值给父元素 */
onMounted(() => {

});

</script>

<style lang="less" scoped>
// 向上滑头部高度变小
@keyframes header-up-slide {
  from {
    //height: 110px;
  }
  to {
    //height: 76px;
  }
}

//  向下滑头部高度变大
@keyframes header-down-slide {
  from {
    //height: 76px;
  }
  to {
    //height: 110px;
  }
}

.headerUpAnimation {
  animation: header-up-slide 0.5s ease;
  // 把物体动画地从一个地方移动到另一个地方，并让它停留在那里：
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
}

.headerDownAnimation {
  animation: header-down-slide 0.5s ease;
  // 把物体动画地从一个地方移动到另一个地方，并让它停留在那里：
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
}

.headPadding {
  padding: 0 12px;
}

.header {
  position: relative;
  height: auto;

  .header:after {
    content: "";
    height: 0;
    clear: both;
    overflow: hidden;
    display: block;
    visibility: hidden;
  }

  .prime {
    display: flex;
    justify-content: flex-end;
    color: rgb(49, 72, 236);
    font-size: 24px;
  }

  .title {
    position: absolute;
    left: 10px;
    top: 38px;
    height: 38px;
    line-height: 38px;
    font-family: var(--primary-font-family);
    font-weight: bold;
    font-size: 24px;
  }

  // 标题往右上运动，直到水平垂直居中
  @keyframes title-up-slide {
    from {
      left: 4%;
    }
    to {
      left: 50%;
      transform: translate(-50%, -97%);
    }
  }

  // 标题往左下运动
  @keyframes title-down-slide {
    from {
      left: 50%;
      transform: translate(-50%, -100%);
    }
    to {
      left: 4%;
    }
  }

  .titleSlideUpAnimation {
    animation: title-up-slide 0.5s ease;
    // 把物体动画地从一个地方移动到另一个地方，并让它停留在那里：
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
  }

  .titleSlideDownAnimation {
    animation: title-down-slide 0.5s ease;
    // 把物体动画地从一个地方移动到另一个地方，并让它停留在那里：
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
  }

  .header-icon {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;

  }

  // 预留插槽往上运动，直到水平垂直居中

  @keyframes slot-up-slide {
    from {
      bottom: 0;
    }
    to {
      top: 0;
    }
  }
  @keyframes slot-down-slide {
    from {
      top: 0;
    }
    to {
      bottom: 0;
    }
  }

  .slotSlideUpAnimation {
    animation: slot-up-slide 0.5s ease;
    // 把物体动画地从一个地方移动到另一个地方，并让它停留在那里：
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
  }

  .slotSlideDownAnimation {
    animation: slot-down-slide 0.5s ease;
    // 把物体动画地从一个地方移动到另一个地方，并让它停留在那里：
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
  }

  .mySlot {
    position: relative;
    top: 40px;
  }
}
</style>
